<template>
	<div class="list">
		<div>

		</div>
		<el-container>
			{{list}}
			<el-table :data="this.list" border style="width: 100%">
				<el-table-column fixed prop="sid" label="学号" width="100">
				</el-table-column>
				<el-table-column prop="sname" label="姓名" width="120">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="120">
				</el-table-column>
				<el-table-column prop="birth" label="出生日期" width="120">
				</el-table-column>
				<el-table-column prop="major" label="专业" width="100">
				</el-table-column>
				<el-table-column prop="credits" label="总学分" width="100">
				</el-table-column>



				<el-table-column fixed="right" label="操作" width="400">
					<template v-slot="scope">
						<el-button type="text" size="small" @click="updataone(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="delcourse(scope.row.sid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-footer>
				<el-pagination background layout="prev, pager, next" :page-size="5"
					@current-change="handleCurrentChange" :total="totals">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>

</template>
<script>
	// import qs from "qs";
	const axios = require('axios');
	export default {
		name: 'list',
		data() {
			return {
				tableData: [],
				totals: '',
				kinds: '',
				departments: '',
				kind: 0,
				department: 0,
				list: []
			}
		},
		created() {
			console.log(document.cookie);


			axios.get('http://localhost:8000/student')
				.then((res) => {
					console.log(res);
					this.list = res.data
				})
				.catch((err) => {
					console.log(err)
				});
		},
		methods: {

			updataone(course) {
				this.$router.push({
					name: 'updata',
					params: {
						sid: course.sid,
						sname: course.sname,
						sex: course.sex,
						birth: course.birth,
						major: course.major,
						credits: course.credits
					}
				});
			},
			delcourse(row) {
				// let id = qs.stringify({
				// 	id: row
				// });
				this.$confirm('你确定删除该学生所有信息?', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.get("http://localhost:8000/delete/"+row)
					
						.then((res) => {
							console.log(res)
							if (res.data =="success") {
								alert("删除成功");
								this.$router.go(0);
							} else {
								alert("删除失败");
							}

						})
						.catch((err) => {
							console.log(err)
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleCurrentChange(currentPage) {
				this.getlist(((currentPage - 1) * 5));
			},
			kindhandleClick(tab, event) {
				console.log(tab[0]);
				console.log(event.target.id);
				console.log(event.target.id.substr(4, event.target.id.length - 1))
				this.kind = event.target.id.substr(4, event.target.id.length - 1)
				this.getlist(0);
			},
			departmenthandleClick(tab, event) {
				console.log(tab[0]);
				console.log(event.target.id);
				console.log(event.target.id.substr(4, event.target.id.length - 1))
				this.department = event.target.id.substr(4, event.target.id.length - 1)
				this.getlist(0);
			}
		}
	}
</script>
